{*
SPDX-FileCopyrightText: © 2023 Olivier Meunier <olivier@neokraft.net>

SPDX-License-Identifier: AGPL-3.0-only
*}
{{- import "./_libs/common" -}}

<div class="layout-topnav" id="menu">
  <div class="logo">
    <a href="{{ urlFor(`/`) }}" title="Home page">{{ yield icon(name="o-logo-square", class="", svgClass="h-11 w-11") }}</a>
  </div>
  <div class="mainmenu">
    <menu class="grow">
      {{- if  hasPermission("bookmarks", "read") -}}
      {{ yield mainMenuItem(name="Bookmarks", path="/bookmarks/unread", icon="o-library",
                            current=pathIs(`/bookmarks`, `/bookmarks/*`)) }}
      {{- end -}}
    </menu>

    {{- if !user.IsAnonymous() -}}
    <menu class="flex-shrink-0">
      <li class="no-js:hidden">
        <button type="button" data-controller="theme" data-action="theme#toggleTheme"
         title="Change theme">
          <span data-theme-target="icon">
            {{ yield icon(name="o-theme-system") }}
          </span>
          <span class="sr-only">Change color theme</span>
          <template data-theme-target="iconLight">{{ yield icon(name="o-theme-light") }}</template>
          <template data-theme-target="iconDark">{{ yield icon(name="o-theme-dark") }}</template>
          <template data-theme-target="iconSystem">{{ yield icon(name="o-theme-system") }}</template>
        </button>
      </li>
      {{- if  hasPermission("profile", "read") -}}
        {{ yield mainMenuItem(name="Settings", path="/profile", icon="o-settings",
                              current=pathIs(`/admin`, `/admin/*`, `/profile`, `/profile/*`)) }}
      {{- end -}}
      {{ yield mainMenuItem(name="Documentation", path="/docs/", icon="o-help",
                            current=pathIs(`/docs/*`)) }}
      <li>
        <form action="{{ urlFor(`/logout`)}}" method="post">
          <button type="submit">{{ yield icon(name="o-logout") }}
          <span class="sr-only">Log out</span></button>
        </form>
      </li>
    </menu>
    {{- end -}}
  </div>
</div>
